<template>
	<view>
		<view class="page">
		   <comp-common v-bind="{data:data}"></comp-common>
		    <comp-header v-bind="{data:data}"></comp-header>
		    <view class="body after-navber">
		        <view :class="['main',data.show_modal?'no-scroll':'']">
		            <image class="bg" :src="data.__wxapp_img.bargain.activity.bg.url"></image>
		            <block v-if="data.show">
		                <view class="block flex-row">
		                    <view class="flex-grow-0" style="z-index: 12;">
		                        <navigator class="rule flex-row flex-x-center flex-y-center" hoverClass="none" openType="redirect" url="/pages/index/index">
		                            <image class="flex-grow-0 back-img" :src="data.__wxapp_img.bargain.list.right.url"></image>
		                            <view class="flex-grow-1">回到首页</view>
		                        </navigator>
		                    </view>
		                    <view class="flex-grow-1"></view>
		                    <view class="flex-grow-0" style="z-index: 12;">
		                        <navigator class="rule flex-x-center flex-y-center" hoverClass="none" url="/bargain/rule/rule">活动规则</navigator>
		                    </view>
		                </view>
		                <view class="block">
		                    <view class="goods-info">
		                        <image class="user-img" :src="data.order_user_avatar"></image>
		                        <view class="flex-x-center flex-y-center" style="margin-top:16upx;color:#999;">{{data.order_user_name}}</view>
		                        <view class="flex-x-center flex-y-center" style="margin:16upx 0;">{{data.content}}</view>
		                        <view class="goods flex-row">
		                            <image class="flex-grow-0" :src="data.cover_pic"></image>
		                            <view class="flex-grow-1 flex-col">
		                                <view class="flex-grow-1" style="margin-top:8upx">
		                                    <view class="text-more-2">{{data.goods_name}}</view>
		                                    <view class="flex-row" style="margin-top:16upx;" v-if="data.reset_time>0">
		                                        <block v-if="data.time_list.d>0">
		                                            <view class="time flex-y-center">{{data.time_list.d}}</view>
		                                            <view style="padding:0 6upx">天</view>
		                                        </block>
		                                        <view class="time flex-y-center">{{data.time_list.h}}</view>
		                                        <view>：</view>
		                                        <view class="time flex-y-center">{{data.time_list.m}}</view>
		                                        <view>：</view>
		                                        <view class="time flex-y-center" style="margin-right:10upx;">{{data.time_list.s}}</view>
		                                        <view>后结束</view>
		                                    </view>
		                                    <view style="margin-top:16upx;color:#ccc" v-else>已结束</view>
		                                </view>
		                                <view class="flex-grow-0" style="color:#ff5c5c;font-size:13pt;" v-if="data.status==0">当前价 ￥{{data.price}}</view>
		                                <view class="flex-grow-0" style="color:#ff5c5c;font-size:13pt;" v-if="data.status==1">砍价成功</view>
		                                <view class="flex-grow-0" style="color:#ff5c5c;font-size:13pt;" v-if="data.status==2">砍价失败</view>
		                            </view>
		                        </view>
		                    </view>
		                </view>
		                <view class="block">
		                    <view class="flex-x-center">
		                        <view style="margin-top:32upx;width:600upx;">
		                            <view class="flex-row" style="width:100%;margin-top:32upx;position:relative;height:40upx;">
		                                <view class="flex-grow-0" style="position:absolute;top:0;" :style="data.money_per>=600?'right:0;':'left:'+new_data.money_per_t">
		                                    <view class="tip flex-y-center">已砍{{data.money}}</view>
		                                </view>
		                            </view>
		                        </view>
		                    </view>
		                    <view class="flex-x-center">
		                        <view style="margin-bottom:40upx;">
		                            <view class="progress-box flex-y-center">
		                                <image :src="data.__wxapp_img.bargain.activity.progress.url"></image>
		                                <view class="progress-view" :style="'width:'+new_data.money_per">
		                                    <view class="progress-img"></view>
		                                </view>
		                            </view>
		                            <view class="flex-row" style="color:#fff">
		                                <view class="flex-grow-1">原价￥{{data.original_price}}</view>
		                                <view class="flex-grow-0">底价￥{{data.min_price}}</view>
		                            </view>
		                        </view>
		                    </view>
		                </view>
		                <block v-if="data.reset_time>0">
		                    <block v-if="data.is_owner">
		                        <view class="block" v-if="data.min_price>=data.price">
		                            <view :animation="data.animationData" @click="buyNow" class="flex-x-center" style="width:680upx;height:112upx;">
		                                <image :src="data.__wxapp_img.bargain.activity.buy_b.url" style="width:100%;height:100%;"></image>
		                            </view>
		                        </view>
		                        <view class="block flex-row" v-else>
		                            <view @click="buyNow" class="flex-grow-1 flex-x-center flex-y-center">
		                                <image class="buy-btn" :src="data.__wxapp_img.bargain.activity.buy.url"></image>
		                            </view>
		                            <view class="flex-grow-1 flex-x-center flex-y-center">
																	<!-- #ifdef MP-WEIXIN -->
		                                <button class="share-btn" openType="share">
		                                    <image class="buy-btn" :src="data.__wxapp_img.bargain.activity.continue.url"></image>
		                                </button>
																	<!-- #endif -->
																	<!-- #ifdef H5 -->
																		<button class="share-btn" @click="onShareWebMessage">
																				<image class="buy-btn" :src="data.__wxapp_img.bargain.activity.continue.url"></image>
																		</button>
																	<!-- #endif -->
		                            </view>
		                        </view>
		                    </block>
		                    <view class="block" v-else>
		                        <view :animation="data.animationData" @click="orderSubmit" class="flex-x-center" style="width:680upx;height:112upx;">
		                            <image :src="data.__wxapp_img.bargain.activity.join.url" style="width:100%;height:100%;"></image>
		                        </view>
		                    </view>
		                </block>
		                <view class="block" v-else>
		                    <view @click="goToList" class="flex-x-center">
		                        <image :src="data.__wxapp_img.bargain.activity.more.url" style="width:680upx;height:112upx;"></image>
		                    </view>
		                </view>
		                <view class="block">
		                    <view class="user-info">
		                        <view class="flex-row flex-x-center flex-y-center">
		                            <view class="one-border"></view>
		                            <view style="margin:0 34upx;font-size:13pt;">砍价记录</view>
		                            <view class="one-border"></view>
		                        </view>
		                        <view class="user-list">
		                            <view class="user-one flex-row flex-y-center" v-if="data.show_more||!data.show_more&&index<3" v-for="(item) in data.bargain_info" :key="item.id">
		                                <view class="flex-grow-1 flex-row flex-y-center">
		                                    <image class="flex-grow-0 item-img" :src="item.avatar"></image>
		                                    <view class="flex-grow-1 text-more">{{item.nickname}}</view>
		                                </view>
		                                <view class="flex-grow-0 flex-row flex-y-center">
		                                    <image class="flex-grow-0" :src="data.__wxapp_img.bargain.activity.used.url" style="width:72upx;height:50upx;margin-right:16upx;"></image>
		                                    <view class="flex-grow-1">{{item.price_content}}</view>
		                                </view>
		                            </view>
		                        </view>
		                        <block v-if="data.bargain_info.length>=3">
		                            <view @click="showMore" class="flex-row flex-x-center flex-y-center" v-if="data.show_more_btn">
		                                <image :src="data.__wxapp_img.bargain.activity.down.url" style="width:18upx;height:18upx;margin-right:16upx;"></image>
		                                <view>查看更多</view>
		                            </view>
		                            <view @click="hideMore" class="flex-row flex-x-center flex-y-center" v-else>
		                                <image :src="data.__wxapp_img.bargain.activity.up.url" style="width:18upx;height:18upx;margin-right:16upx;"></image>
		                                <view>收起</view>
		                            </view>
		                        </block>
		                    </view>
		                </view>
		            </block>
		        </view>
		        <view class="new-modal" v-if="data.show_modal">
		            <view class="flex-x-center">
		                <view v-if="data.show_modal_a">
		                    <view class="modal-header flex-x-center flex-y-center">
		                        <image class="header-bg" :src="data.__wxapp_img.bargain.activity.header_bg.url"></image>
		                        <view @click="close" class="x">
		                            <image :src="data.__wxapp_img.bargain.activity.x.url"></image>
		                        </view>
		                        <view :animation="data.animationDataHead" class="header-bg-1">
		                            <image :src="data.__wxapp_img.bargain.activity.header_bg_1.url" style="width:100%;height:100%;"></image>
		                        </view>
		                    </view>
		                    <view class="modal-body">
		                        <view class="flex-x-center" style="padding-top:64upx;">
		                            <view v-if="data.is_owner">
		                                <view>你一出手就帮自己砍了
		                                        <text style="color:#ff5c5c">{{data.bargain_price}}</text>元</view>
		                                <view style="margin-top:20upx;">快邀请好友帮你一起砍价吧</view>
		                            </view>
		                            <view v-else>
		                                <view style="padding:0 24upx;">你一出手就帮{{data.order_user_name}}砍了
		                                        <text style="color:#ff5c5c">{{data.bargain_price}}</text>元</view>
		                            </view>
		                        </view>
		                        <view class="flex-x-center modal-btn">
		                            <view :animation="data.animationData" v-if="data.is_owner">
																	<!-- #ifdef MP-WEIXIN -->
		                                <button class="share-btn" openType="share">
		                                    <image :src="data.__wxapp_img.bargain.activity.help.url"></image>
		                                </button>
																	<!-- #endif -->
																	<!-- #ifdef H5 -->
																	<button class="share-btn" @click="onShareWebMessage">
																	    <image :src="data.__wxapp_img.bargain.activity.help.url"></image>
																	</button>
																	<!-- #endif -->
		                            </view>
		                            <view :animation="data.animationData" v-else>
		                                <image @click="orderSubmit" :src="data.__wxapp_img.bargain.activity.join_m.url"></image>
		                            </view>
		                        </view>
		                    </view>
		                </view>
		                <view v-else>
		                    <view class="modal-header-2 flex-x-center flex-y-center">
		                        <view :animation="data.animationDataT" style="width:0;height:0">
		                            <image :src="data.__wxapp_img.bargain.activity.header_bg_2.url" style="width:100%;height:100%;"></image>
		                        </view>
		                        <image class="header-bg-3" :src="data.__wxapp_img.bargain.activity.header_bg_3.url"></image>
		                    </view>
		                </view>
		            </view>
		        </view>
		    </view>
		    <comp-footer v-bind="{data:data}"></comp-footer>
		</view>
		
	</view>
</template>
<script>var myVue = {};
	//#ifndef H5
	var Vue = require('vue')
	//#endif
	//#ifdef H5
	var Vue = require('vue').default
	//#endif
	var t = require("../commons/time.js"), a = (Vue.prototype.getApp, Vue.prototype.getApp.api, null), e = !1, i = !0;
	export default {
		computed:{
			new_data(){
				var new_data = this.data;
				new_data.money_per_t = uni.upx2px(new_data.money_per_t) + 'px';
				new_data.money_per = uni.upx2px(new_data.money_per) + 'px';
				return new_data;
			}
		},
		data() {
			return {
				data: {
					show_more: !0,
					p: 1,
					show_modal: !1,
					show: !1,
					show_more_btn: !0,
					animationData: null,
					show_modal_a: !1
				}
			}
		},
		onLoad: function(a) {myVue = this;
			var e = this;
			e.getApp.page.onLoad(this, a);
			e.setData({
				order_id: a.order_id
			}), e.joinBargain(), t.init(e);
		},
		onReady: function() {
			myVue.getApp.page.onReady(this);
		},
		onShow: function() {
			myVue.getApp.page.onShow(this);
		},
		onHide: function() {
			myVue.getApp.page.onHide(this);
		},
		onUnload: function() {
			myVue.getApp.page.onUnload(this), clearInterval(a), a = null;
		},
		onShareAppMessage: function() {
			myVue.getApp.page.onShareAppMessage(this);
			var t = this;
			return {
				path: "/bargain/activity/activity?order_id=" + t.data.order_id + "&user_id=" + t.data.__user_info.id,
				success: function(t) {},
				title: t.data.share_title || null
			};
		},
		methods: {
			joinBargain: function() {
				var t = this;
				t.getApp.request({
					url: t.getApp.api.bargain.bargain,
					data: {
						order_id: t.data.order_id
					},
					success: function(a) {
						0 == a.code ? (t.getOrderInfo(), t.setData(a.data)) : (t.showToast({
							title: a.msg
						}), t.getApp.core.hideLoading());
					}
				});
			},
			getOrderInfo: function() {
				var t = this;
				t.getApp.request({
					url: t.getApp.api.bargain.activity,
					data: {
						order_id: t.data.order_id,
						page: 1
					},
					success: function(a) {
						console.log("GETOAAAA")
						console.log(a);
						0 == a.code ? (t.setData(a.data),
						 t.setData({
							time_list: t.setTimeList(a.data.reset_time),
							show: !0
						}), t.data.bargain_status && t.setData({
							show_modal: !0
						}), t.setTimeOver(), i = !1
						 //#ifndef H5
						,t.animationCr()
						//#endif
						) : t.showToast({
							title: a.msg
						});
					},
					complete: function(t) {
						myVue.getApp.core.hideLoading();
					}
				});
			},
			loadData: function() {
				var t = this;
				if (t.getApp.core.showLoading({
						title: "加载中"
					}), !e) {
					e = !0, t.getApp.core.showNavigationBarLoading();
					var a = t.data.p + 1;
					t.getApp.request({
						url: t.getApp.api.bargain.activity,
						data: {
							order_id: t.data.order_id,
							page: a
						},
						success: function(e) {
							if (0 == e.code) {
								var o = t.data.bargain_info;
								o = o.concat(e.data.bargain_info), t.setData({
									bargain_info: o,
									p: a,
									price: e.data.price,
									money_per: e.data.money_per,
									money_per_t: e.data.money_per_t
								}), 0 == e.data.bargain_info.length && (i = !0, a -= 1, t.setData({
									show_more_btn: !1,
									show_more: !0,
									p: a
								}));
							} else t.showToast({
								title: e.msg
							});
						},
						complete: function(t) {
							t.getApp.core.hideLoading(), 
							t.getApp.core.hideNavigationBarLoading(), e = !1;
						}
					});
				}
			},
			showMore: function(t) {
				var a = this;
				a.data.show_more_btn && (i = !1), i || a.loadData();
			},
			hideMore: function() {
				var t=this;
				t.setData({
					show_more_btn: !0,
					show_more: !1
				});
			},
			orderSubmit: function() {
				var t = this;
				t.getApp.core.showLoading({
					title: "加载中"
				}), t.getApp.core.redirectTo({
					url: "/bargain/goods/goods?goods_id=" + t.data.goods_id
				});
			},
			close: function() {
				this.setData({
					show_modal: !1
				});
			},
			buyNow: function() {
				var t = this,
					a = [],
					e = [];
				e.push({
					bargain_order_id: t.data.order_id
				}), a.push({
					store_id: 0,
					goods_list: e
				}), t.getApp.core.showModal({
					title: "提示",
					content: "是否确认购买？",
					success: function(t) {
						t.confirm && uni.redirectTo({
							url: "/pages/new-order-submit/new-order-submit?store_list=" + JSON.stringify(a)
						});
					}
				});
			},
			goToList: function() {
				myVue.getApp.core.redirectTo({
					url: "/bargain/list/list"
				});
			},
			animationCr: function() {
				var t = this;
				t.animationT(), setTimeout(function() {
					t.setData({
						show_modal_a: !0
					}), t.animationBig(), t.animationS();
				}, 800);
			},
			animationBig: function() {
				var a = this;
				var t = a.getApp.core.createAnimation({
						duration: 500,
						transformOrigin: "50% 50%"
					}),
					
					e = 0;
				setInterval(function() {
					e % 2 == 0 ? t.scale(.9).step() : t.scale(1).step(), a.setData({
						animationData: t.export()
					}), 500 == ++e && (e = 0);
				}, 500);
			},
			animationS: function() {
				var t = myVue.getApp.core.createAnimation({
						duration: 500
					}),
					a = this;
				t.width("512upx").height("264upx").step(), t.rotate(-2).step(), t.rotate(4).step(),
					t.rotate(-2).step(), t.rotate(0).step(), a.setData({
						animationDataHead: t.export()
					});
			},
			animationT: function() {
				var t = myVue.getApp.core.createAnimation({
						duration: 200
					}),
					a = this;
				t.width("500upx").height("500upx").step(), a.setData({
					animationDataT: t.export()
				});
			},
			onShareWebMessage: function() {
				var t = this;
				this.$webShare({
					path: "/bargain/activity/activity?order_id=" + t.data.order_id + "&user_id=" + t.data.__user_info.id,
					title: t.data.share_title || null
				}).then(function() {
					
				})
			},
		}

	}
</script>

<style scoped>
	.main {
	    background: -prefix-linear-gradient(top,#ee3763,#fdac42);
	    background: linear-gradient(to bottom,#ee3763,#fdac42);
	    padding-bottom: 40upx;
	    min-height: 100%;
	}
	
	.bg {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100upx;
	}
	
	.block {
	    padding: 0 20upx;
	}
	
	.rule {
	    height: 40upx;
	    border-radius: 20upx;
	    background-color: rgba(0,0,0,0.2);
	    margin-top: 32upx;
	    color: #fff;
	    font-size: 9pt;
	    padding: 0 24upx;
	}
	
	.goods-info {
	    width: 100%;
	    margin-top: 28upx;
	    background-color: #fff;
	    border-radius: 16upx;
	    position: relative;
	    padding-top: 59upx;
	}
	
	.user-img {
	    position: absolute;
	    top: -64upx;
	    left: 50%;
	    margin-left: -59upx;
	    border-radius: 118upx;
	    border: 1upx solid #fff;
	    width: 118upx;
	    height: 118upx;
	}
	
	.goods {
	    padding: 24upx;
	    border-top: 1upx solid #e2e2e2;
	}
	
	.goods image {
	    width: 216upx;
	    height: 216upx;
	    margin-right: 20upx;
	}
	
	.time {
	    height: 42upx;
	    padding: 0 4upx;
	    border-radius: 4upx;
	    background-color: #666;
	    color: #fff;
	}
	
	.progress-box {
	    margin-top: 16upx;
	    width: 600upx;
	    height: 28upx;
	    border-radius: 12upx;
	    margin-bottom: 16upx;
	    position: relative;
	}
	
	.progress-box image {
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	}
	
	.progress-view {
	    height: 24upx;
	    background-color: #ff9f9f;
	    border-radius: 12upx;
	    z-index: 10;
	    position: relative;
	}
	
	.progress-img {
	    position: absolute;
	    right: -14upx;
	    top: -4upx;
	    width: 30upx;
	    height: 30upx;
	    border: 6upx solid #fff;
	    border-radius: 30upx;
	    background-color: #ff9f9f;
	}
	
	.buy-btn {
	    width: 328upx;
	    height: 82upx;
	}
	
	.share-btn {
	    border: none;
	    border-radius: 0;
	    margin: 0;
	    padding: 0;
	    background-color: none;
	    background: rgba(255,255,255,0);
	    font-size: 0;
	    line-height: normal;
	}
	
	.share-btn:after {
	    content: '';
	    margin: 0;
	    padding: 0;
	    display: none;
	}
	
	.user-info {
	    margin-top: 40upx;
	    width: 100%;
	    border-radius: 16upx;
	    background-color: rgba(255,255,255,0.3);
	    height: auto;
	    color: #fff;
	    padding: 48upx 40upx 40upx 40upx;
	}
	
	.one-border {
	    width: 160upx;
	    height: 2upx;
	    background-color: #fff;
	}
	
	.user-list {
	    padding: 48upx 0 8upx 0;
	    font-size: 13pt;
	}
	
	.user-one {
	    margin-bottom: 40upx;
	}
	
	.item-img {
	    width: 80upx;
	    height: 80upx;
	    margin-right: 24upx;
	    border-radius: 80upx;
	}
	
	.tip {
	    position: relative;
	    height: 40upx;
	    padding: 0 20upx;
	    background-color: #fff;
	    border-radius: 20upx;
	    color: #ff5c5c;
	    font-size: 9pt;
	}
	
	.modal-body {
	    width: 638upx;
	    background-color: #fff;
	    position: relative;
	    padding-bottom: 48upx;
	    border-radius: 0 0 16upx 16upx;
	}
	
	.modal-header {
	    width: 100%;
	    height: 200upx;
	    position: relative;
	}
	
	.header-bg {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    left: 0;
	    top: 0;
	}
	
	.header-bg-1 {
	    width: 0;
	    height: 0;
	    margin-top: -64upx;
	    position: relative;
	    z-index: 15;
	}
	
	.x {
	    position: absolute;
	    right: 16upx;
	    top: 20upx;
	    width: 50upx;
	    height: 50upx;
	}
	
	.x image {
	    width: 100%;
	    height: 100%;
	}
	
	.modal-btn {
	    margin-top: 48upx;
	}
	
	.modal-btn image {
	    width: 480upx;
	    height: 88upx;
	}
	
	.modal-header-2 {
	    position: relative;
	    padding: 24upx 69upx;
	    background-color: #fff;
	    border-radius: 16upx;
	    width: 638upx;
	    height: 548upx;
	}
	
	.header-bg-3 {
	    width: 310upx;
	    height: 240upx;
	    position: absolute;
	    left: calc(50% - 155upx);
	    top: calc(50% - 120upx);
	    z-index: 10;
	}
	
	.back-img {
	    width: 18upx;
	    height: 18upx;
	    margin-right: 10upx;
	}
</style>
